<template>
  <div>
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_3" style="margin-left:8px;">服务类型</span>
          <span class="c_7" v-if="refundType==1 ">仅退款</span>
          <span class="c_7" v-if="refundType==2 ">退货退款</span>
          <span class="c_4" v-if="refundType=='' || refundType==null">必填</span>
        </div>
        <div class="c_2" @click="popup2" v-if="refundType=='' || refundType==null">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup2" v-if="refundType!='' || refundType!=null">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>

    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="c" v-if=" refundType==1 ||  refundType==''">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3" style="margin-left:5px;">货物状态</span>
          <span class="c_7" v-if=" goodsState==1 ">未收到货</span>
          <span class="c_7" v-if=" goodsState==2 ">已收到货</span>
          <span class="c_4" v-if=" goodsState=='' ||  goodsState==null ">必填</span>
        </div>
        <div class="c_2" @click="popup" v-if=" goodsState=='' ">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup" v-if=" goodsState!=''">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>
    <div class="c" v-if=" refundType==2">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3" style="margin-left:5px;">退货方式</span>
          <span class="c_7" style="float:right">卖家同意退货后买家寄出退货商品</span>
        </div>
      </div>
    </div>
    <div class="c" v-if="refundType==1">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">* </span>
          <span class="c_3" style="margin-left:5px;">退款原因</span>
          <span class="c_7" v-if=" refundReason=='快递一直未送到' ">快递一直未送到</span>
          <span class="c_7" v-if=" refundReason=='未按约定时间发货' ">未按约定时间发货</span>
          <span class="c_7" v-if=" refundReason=='快递无跟踪记录' ">快递无跟踪记录</span>
          <span class="c_7" v-if=" refundReason=='其他' ">其他</span>
          <span class="c_4" v-if=" refundReason=='' ">必填</span>
        </div>
        <div class="c_2" @click="popup3" v-if=" refundReason=='' ">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup3" v-if=" refundReason!='' ">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>
    <div class="c" v-if="refundType==2">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3" style="margin-left:5px;">退款原因</span>
          <span class="c_7" v-if="refundReason=='商品质量问题' ">商品质量问题</span>
          <span class="c_7" v-if="refundReason=='尺寸/容量与商品描述不符' ">尺寸/容量与商品描述不符</span>
          <span class="c_7" v-if="refundReason=='收到商品与描述不符' ">收到商品与描述不符</span>
          <span class="c_7" v-if="refundReason=='卖家发错货' ">卖家发错货</span>
          <span class="c_7" v-if="refundReason=='收到商品少件或破损' ">收到商品少件或破损</span>
          <span class="c_7" v-if="refundReason=='其他' ">其他</span>
          <span class="c_4" v-if="refundReason=='' ">必填</span>
        </div>
        <div class="c_2" @click="popup1" v-if=" refundReason=='' ">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup1" v-if=" refundReason!='' ">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>
    
    <div class="c1" v-if=" refundType=='1'">
      <div class="c_item1">
        <div class="c_1" style="margin-left:5px;">
          <span class="c_31">退款金额：</span>
          <span class="c_5" style="margin-top:10px;">¥ {{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}}</span>
        </div>
        <div class="c_1" >
          <span class="c_6" style="margin-left:5px;">不可修改，最多 ¥{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}},含发货邮费 ¥{{detailInfo.goodsFreight}}</span>
        </div>
      </div>
    </div>



    <div class="c1" v-if=" refundType=='2'">
      <div class="c_item1">
        <div class="c_1" style="margin-left:5px;">
          <span class="c_31">退款金额：</span>
          <span class="c_5" style="display:inline-block;" @change="price"><van-field v-model="refundMoney" placeholder="选填" /></span>
        </div>
        <div class="c_1" >
          <span class="c_6" style="margin-left:5px;">可修改，最多不可超过 ¥{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}},含发货邮费 ¥{{detailInfo.goodsFreight}}</span>
        </div>
      </div>
    </div>
    <div class="c11">
      <div class="c_item">
        <div class="c_11">
          <span class="c_3" style="display:inline-block;">退款说明:</span>
          <span class="cc" @change="note">
              <van-field v-model="refundNote" placeholder="选填" />
          </span>
        </div>
      </div>
    </div>


    <van-popup v-model="showReason2" position="bottom" :style="{ height: '50%' }" class="popup">
      <!-- <div class="reason_title">服务类型</div>
      <div class="reason">
        <div class="reason_item">
          <div>仅退款</div>
          <div>
            <van-radio name="1" checked-color="#ff6000" v-model="refundType" @click="type"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>退货退款</div>
          <div>
            <van-radio name="2" checked-color="#ff6000" v-model="refundType" @click="types"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div> -->

		    <div class="popup_title">服务类型</div>		   
		    <div class="popup_wrap">
		    	<div class="selectWrap" @click="type">
		    		<div class="section2">仅退款</div>
		    		<div class="section3">	    			
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="refundType==1"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>
		    	<div class="selectWrap" @click="types">
		    		<div class="section2">退货退款</div>
		    		<div class="section3">
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="refundType==2"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>	   	 
		    </div>	
		    
		    <div class="popup_btn">		    	
		    	<van-button  color="#FFD630" block @click="showReason2=false">确认</van-button>
		    </div>	
    </van-popup>


    <van-popup v-model="showReason" position="bottom" :style="{ height: '65%' }" class="popup">
      <!-- <div class="reason_title">货物状态</div>
      <div class="reason">
        <div class="reason_item">
          <div >
            <div >未收到货</div>
            <div style="font-size:12px;color:#999999;margin-top:10px">未收到货，或与商家协商后申请</div>
          </div>
          <div>
            <van-radio :name="1" checked-color="#ff6000" v-model="goodsState" @click="state"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div >
            <div >已收到货</div>
            <div style="font-size:12px;color:#999999;margin-top:10px">已收到货，不符合商品描述</div>
          </div>
          <div>
            <van-radio :name="2" checked-color="#ff6000" v-model="goodsState" @click="states"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div> -->

      <div class="popup_title">货物状态</div>		   
		    <div class="popup_wrap">
		    	<div class="selectWrap" @click="state">
            <div class="section2">
              <div class="section2">未收到货</div>
              <div style="font-size:12px;color:#999999;margin-top:10px;display:block;">未收到货，或与商家协商后申请</div>
            </div>
		    		<div class="section3">	    			
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="goodsState==1"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>
		    	<div class="selectWrap" @click="states">
            <div class="section2">
              <div class="section2">已收到货</div>
              <div style="font-size:12px;color:#999999;margin-top:10px">已收到货，不符合商品描述</div>
            </div>
		    		<div class="section3">
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="goodsState==2"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>	   	 
		    </div>	
		    <div class="popup_btn">		    	
		    	<van-button  color="#FFD630" block @click="showReason=false">确认</van-button>
		    </div>
    </van-popup>
    <van-popup v-model="showReason1" position="bottom" :style="{ height: '65%' }">
      <div class="reason_title">退款原因</div>
      <div class="reason">
        <div class="reason_item">
          <div>商品质量问题</div>
          <div>
            <van-radio name="商品质量问题" checked-color="#ff6000" v-model="refundReason" @click="question1"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>尺寸/容量与商品描述不符</div>
          <div>
            <van-radio name="尺寸/容量与商品描述不符" checked-color="#ff6000" v-model="refundReason" @click="question2"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>收到商品与描述不符</div>
          <div>
            <van-radio name="收到商品与描述不符" checked-color="#ff6000" v-model="refundReason" @click="question3"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>卖家发错货</div>
          <div>
            <van-radio name="卖家发错货" checked-color="#ff6000" v-model="refundReason" @click="question4"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>收到商品少件或破损</div>
          <div>
            <van-radio name="收到商品少件或破损" checked-color="#ff6000" v-model="refundReason" @click="question5"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>其他</div>
          <div>
            <van-radio name="其他" checked-color="#ff6000" v-model="refundReason" @click="question6"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>
    <van-popup v-model="showReason3" position="bottom" :style="{ height: '65%' }">
      <div class="reason_title">退款原因</div>
      <div class="reason">
        <div class="reason_item">
          <div>快递一直未送到</div>
          <div>
            <van-radio name="快递一直未送到" checked-color="#ff6000" v-model="refundReason" @click="question7"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>未按约定时间发货</div>
          <div>
            <van-radio name="未按约定时间发货" checked-color="#ff6000" v-model="refundReason" @click="question8"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>快递无跟踪记录</div>
          <div>
            <van-radio name="快递无跟踪记录" checked-color="#ff6000" v-model="refundReason" @click="question9"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>其他</div>
          <div>
            <van-radio name="其他" checked-color="#ff6000" v-model="refundReason" @click="question6"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>
  </div>
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
      ordersId:'',
      userId:'',
      showReason: false,
      showReason1: false,
      showReason2: false,
      showReason3: false,
      refundType:-1,//退款类型
      goodsState :'',//货物状态
      refundMoney:'',//退款金额
      refundReason:'',//退款原因
      refundImage:'',//图片
      refundNote:'',//备注
      detailList:[],
    };
  },
  props:['detailInfo'],
  methods: {
    //初始化获取信息
    getInfo() {
      let that = this;
      let url = this.$api+'/marketorderservice/api/v1/market/refund/log/list';
      let params = {
        refundId: this.refundId,
        userId: this.userId
      };
      this.$Axios.Post(url, params).then(function(res) {
        that.detailList = res.data.refundRVo.refund;
        that.refundType = res.data.refundRVo.refund.refundType;
        that.goodsState = res.data.refundRVo.refund.goodsState;
        that.refundReason = res.data.refundRVo.refund.refundReason;
        that.refundImage = res.data.refundRVo.refund.refundImage;
        that.refundNote = res.data.refundRVo.refund.refundNote;
      });
    },
    //获取金额
    getData() {
      let that = this;
       let url1 = this.$api + "/marketorderservice/api/v1/market/orders";
      this.$Axios.Get(url1 + "/" + this.ordersId + "/" + this.userId).then(function(res) {
          if (res.responseCode) {
            that.refundMoney = res.data.orders.ordersPrice;
          } 
        });
    },
    popup() {
      this.showReason = true;
    },
    popup1() {
      this.showReason1 = true;
    },
    popup2(){
      this.showReason2 = true;
    },
    popup3(){
      this.showReason3 = true;
    },
    tip(){
      this.$toast('请先选择货物状态');
    },
    type(){
      this.refundType = 1
      this.$emit('func',this.refundType)
    },
    types(){
      this.refundType = 2
      this.$emit('func',this.refundType)
    },
    state(){
      this.goodsState = 1
      this.$emit('func1',this.goodsState)
    },
    states(){
      this.goodsState = 2
      this.$emit('func1',this.goodsState)
    },
    question1(){
      this.refundReason = '商品质量问题'
      this.$emit('func2',this.refundReason)
    },
    question2(){
      this.refundReason = '尺寸/容量与商品描述不符'
      this.$emit('func2',this.refundReason)
    },
    question3(){
      this.refundReason = '收到商品与描述不符'
      this.$emit('func2',this.refundReason)
    },
    question4(){
      this.refundReason = '卖家发错货'
      this.$emit('func2',this.refundReason)
    },
    question5(){
      this.refundReason = '收到商品少件或破损'
      this.$emit('func2',this.refundReason)
    },
    question6(){
      this.refundReason = '其他'
      this.$emit('func2',this.refundReason)
    },
    question7(){
      this.refundReason = '快递一直未送到'
      this.$emit('func2',this.refundReason)
    },
    question8(){
      this.refundReason = '未按约定时间发货'
      this.$emit('func2',this.refundReason)
    },
    question9(){
      this.refundReason = '快递无跟踪记录'
      this.$emit('func2',this.refundReason)
    },
    note(){
      this.$emit('func3',this.refundNote)
    },
    price(){
      this.$emit('func4',this.refundMoney)
    },
    close() {
      this.showReason = false;
      this.showReason1 = false;
      this.showReason2 = false;
      this.showReason3 = false;
    },
  },
  mixins: [publicFun], //混入
  mounted() {
    this.userId = this.$router.currentRoute.query.userId;
    this.refundId = this.$router.currentRoute.query.refundId;
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.getInfo();
    this.getData();
  }
};
</script>

<style scoped="" lang="scss">
.a {
  padding: 15px;
}
.b {
  width: 100%;
}
.text {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.txt {
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  float: right;
}
.c {
  padding: 15px;
  padding-bottom: 0px;
  background: #fff;
  /* margin-bottom: 10px; */
  border-bottom: 1px solid #f8f8f8;
}
.c1 {
  padding: 5px 15px;
  background: #fff;
  margin-bottom: 10px;
  border-bottom: 1px solid #f8f8f8;
}
.c11 {
  padding: 5px 15px;
  background: #fff;
}
.c_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_item1 {
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_1 {
  align-items: center;
  display: flex;
}
.c_3 {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  display:flex;
}
.c_31 {
  padding: 10px 0 0 0;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.c_4 {
  margin-left: 15px;
  color: #aaa;
  display:flex;
  font-size:13px;
}
.c_7 {
  margin-left: 15px;
  font-size: 13px;
  /* font-weight: bold; */
  color: #333333;
  display:flex;
}
.cc{
  margin-left: 70px;
  margin-top: -20px;
  color: #aaa;
  display:flex;
}
.icon {
  vertical-align: -2px;
}
.c_2 {
  color: #aaa;
  font-size: 14px;
}
.c_5 {
  font-size: 13px;
  color: #f22613;
}
.c_6 {
  padding-top: 10px;
  font-size: 12px;
  color: #999999;
}

.content {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #e5e5e5;
}
.tit {
  padding: 5px;
}
.t_1 {
  font-size: 12px;
  padding: 5px;
  color: #333333;
  font-weight: bold;
}
.t_2 {
  padding: 5px 0 10px 5px;
  font-size: 12px;
  color: #999999;
}
.van-cell {
  padding: 0;
}
/* .reason_title {
  text-align: center;
  padding: 25px 0;
  font-size: 20px;
} */
.reason_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  color: rgba(51, 51, 51, 1);
}
.reason {
  padding: 0 10px;
}
.reason_item {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  margin-bottom: 10px;
}
.reason_item:nth-last-child(1) {
  border: none;
}
.btn {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background-color: #ffd630;
  position: fixed;
  bottom: 0;
}
.popup{
	.popup_title{font-size: 14px;padding: 21px;text-align: center;font-weight: 500;}	
	.popup_btn{position: absolute;bottom: 0;left: 0;width: 100%;}	
	.popup_wrap{margin-top: 10px;background: #fff;padding: 0 20px;
	 .selectWrap{padding: 15px 0;display: flex;align-items: center;border-bottom: 1px solid #f0f0f0;}
	 .selectWrap:nth-last-child(1){border:none}
	 .section3 img{width: 14px;display: block;}
	 .section2{flex: 1;}   
	}		
}
</style>